<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html id="home" lang="en">

<head>
    <title>Join with/without camera using RTCMultiConnection ® Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script>
    /* function to get URL parameter values */
    (function() {
        var params = {},
            r = /([^&=]+)=?([^&]*)/g;

        function d(s) {
            return decodeURIComponent(s.replace(/\+/g, ' '));
        }

        var match, search = window.location.search.toLowerCase();
        while (match = r.exec(search.substring(1)))
            params[d(match[1])] = d(match[2]);

        window.params = params;
    })();

    var hash = window.location.hash.replace('#', '');
    if (!hash.length && !window.params.join) location.href = location.href + '#' + (Math.random() * 1000 << 10);
    </script>
    <style>
    @import url(https://fonts.googleapis.com/css?family=Inconsolata);
    html {
        background: #eee;
    }
    body {
        font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
        font-size: 1.2em;
        line-height: 1.2em;
        margin: 0;
    }
    article,
    footer {
        display: block;
        max-width: 900px;
        min-width: 360px;
        width: 80%;
    }
    article {
        background: #fff;
        border: 1px solid;
        border-color: #ddd #aaa #aaa #ddd;
        margin: 2.5em auto 0 auto;
        padding: 2em;
    }
    h1 {
        margin-top: 0;
    }
    article p:first-of-type {
        margin-top: 1.6em;
    }
    article p:last-child {
        margin-bottom: 0;
    }
    footer {
        margin: 0em auto 2em auto;
        text-align: center;
    }
    footer a {
        color: #666;
        font-size: inherit;
        padding: 1em;
        text-decoration: none;
        text-shadow: 0 1px 1px #fff;
    }
    footer a:hover,
    footer a:focus {
        color: #111;
    }
    h1,
    h2 {
        border-bottom: 1px solid black;
        display: inline;
        font-weight: normal;
        line-height: 36px;
        padding: 0 0 3px 0;
    }
    a {
        color: #2844FA;
        text-decoration: none;
    }
    a:hover,
    a:focus {
        color: #1B29A4;
    }
    a:active {
        color: #000;
    }
    :-moz-any-link:focus {
        border: 0;
        color: #000;
    }
    ::selection {
        background: #ccc;
    }
    ::-moz-selection {
        background: #ccc;
    }
    button,
    select {
        -moz-border-radius: 3px;
        -moz-transition: none;
        -webkit-transition: none;
        background: #0370ea;
        background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
        background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
        border: 1px solid #076bd2;
        border-radius: 3px;
        color: #fff;
        display: inline-block;
        font-family: inherit;
        font-size: .8em;
        line-height: 1.3;
        padding: 5px 12px;
        text-align: center;
        text-shadow: 1px 1px 1px #076bd2;
    }
    button:hover {
        background: rgb(9, 147, 240);
    }
    button:active {
        background: rgb(10, 118, 190);
    }
    button[disabled] {
        background: none;
        border: 1px solid rgb(187, 181, 181);
        color: gray;
        text-shadow: none;
    }
    strong {
        color: rgb(204, 14, 14);
        font-family: inherit;
        font-weight: normal;
    }
    #result div {
        border: 1px solid Gray;
        border-bottom: 0;
        padding: .8em 1.5em;
    }
    select {
        color: black;
        text-align: left;
        text-shadow: none;
    }
    #local-media-stream video {
        width: 40%;
    }
    td {
        vertical-align: top;
    }
    #chat-output div {
        border: 1px solid black;
        border-bottom: 0;
        padding: .1em .4em;
    }
    input {
        border: 1px solid black;
        font-family: inherit;
        margin: .1em .3em;
        outline: none;
        padding: .1em .2em;
        width: 93%;
    }
    #chat-output {
        margin: 0 0 0 .4em;
        max-height: 12em;
        overflow: auto;
    }
    pre {
        border-left: 2px solid red;
        margin-left: 2em;
        padding-left: 1em;
    }
    </style>
    <!-- for HTML5 el styling -->
    <script>
    document.createElement('article');
    document.createElement('footer');
    </script>

    <script src="//cdn.webrtc-experiment.com/firebase.js">
    </script>
    <script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js">
    </script>
</head>

<body>
    <article>
        <a href="https://www.webrtc-experiment.com/" style="border-bottom: 1px solid #2844FA; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">↑



                WEBRTC EXPERIMENTS</a>


        <h1>
            Join with/without camera using <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection" target="_blank">RTCMultiConnection</a>
        </h1>

        <p>
            <span>Copyright © 2013</span> <a href="https://github.com/muaz-khan" target="_blank">Muaz



                                                  Khan</a>
            <span>&lt;</span><a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>
            <span>&gt;.</span>
        </p>
        <section class="plusone-gplus">
            <div class="g-plusone" data-href="https://www.webrtc-experiment.com/"></div>
        </section>

        <section>


            <h2>Join:</h2>

            <input type="checkbox" id="join-without-camera" style="width: auto;" checked>
            <label for="join-without-camera">without camera</label>

            <button id="join-session">Join</button>

            <h2>or open new session:</h2>
            <button id="open-session">Open Session</button>
        </section>

        <table style="border-left: 1px solid black; width: 100%;">
            <tr>
                <td>
                    <h2 style="display: block; text-align: center;">Local Media Stream</h2>

                    <section id="local-media-stream"></section>
                </td>
            </tr>
        </table>
        <script>
        var connection = new RTCMultiConnection();
        connection.session = {
            audio: true,
            video: true
        };
        connection.onstream = function(e) {
            var mediaElement = e.mediaElement;
            if (e.type === 'remote') document.getElementById('local-media-stream').appendChild(mediaElement);
            if (e.type === 'local') document.getElementById('local-media-stream').appendChild(mediaElement);
        };

        var sessionid = location.hash.substr(1);

        document.getElementById('open-session').onclick = function() {
            connection.open(sessionid);
            disableButtons();

            this.parentNode.innerHTML = '<h2>Share with friends: <a href="' + location.href + '" target="_blank">Share this link!</a></h2>';
        };

        connection.onstreamended = function(e) {
            if (e.mediaElement.parentNode) {
                e.mediaElement.parentNode.removeChild(e.mediaElement);
            }
        };

        document.getElementById('join-session').onclick = joinRTCSession;

        function joinRTCSession() {
            connection.dontAttachStream = !!document.getElementById('join-without-camera').checked;
            connection.connect(sessionid);
            disableButtons();
        }

        function disableButtons() {
            if (document.getElementById('join-session')) document.getElementById('join-session').disabled = true;
            if (document.getElementById('open-session')) document.getElementById('open-session').disabled = true;
        }
        </script>
        <br/>
        <br/>

        <h2>Getting started with <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection" target="_blank">RTCMultiConnection</a>
        </h2>
        <pre>
            &lt;script src="<a href="https://www.webrtc-experiment.com/RTCMultiConnection-v1.4.js" target="_blank">https://www.webrtc-experiment.com/RTCMultiConnection-v1.4.js</a>"&gt;&lt;/script&gt; &lt;script&gt; var connection = new
            <strong>RTCMultiConnection</strong>(); // force RTCMultiConnection to not attach local stream connection.
            <strong>dontAttachStream</strong> = true; // to create/open a new session connection.
            <strong>open</strong>('session-id'); // if someone already created a session; to join it: use "connect" method connection.
            <strong>connect</strong>('session-id'); &lt;/script&gt;
        </pre>
        <br/>
        <br/>

        <h2><a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection" target="_blank">RTCMultiConnection</a> features:
        </h2>
        <ol>
            <li>You can open multi-sessions and multi-connections — in the same page</li>
            <li>You can share files of any size — directly</li>
            <li>You can share text messages of any length</li>
            <li>You can share one-stream in many unique ways — in the same page</li>
        </ol>

        <br/>
        <br/>

        <h2>
            <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RTCMultiConnection" target="_blank">Source



                    code and Documentation on Github!</a>
        </h2>

        <br/>
        <br/>
        <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
            <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>

            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
        </section>
    </article>
    <footer>
        <p>
            <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a>©
            <a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>,
            <span>2013 </span>»
            <a href="mailto:muazkh@gmail.com" target="_blank">Email</a>»
            <a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>»
            <a href="https://github.com/muaz-khan" target="_blank">Github</a>
        </p>
    </footer>
    <script src="//cdn.webrtc-experiment.com/commits.js">
    </script>
</body>

</html>